'use client';

import { useEffect, useRef } from 'react';
import { GameState, FoodType } from '../types/game';
import { GAME_SETTINGS } from '../config/gameConfig';

interface GameCanvasProps {
  gameState: GameState;
  shake: boolean;
}

export default function GameCanvas({ gameState, shake }: GameCanvasProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 清空画布
    ctx.fillStyle = '#1a1a1a';
    ctx.fillRect(0, 0, GAME_SETTINGS.GRID_SIZE * GAME_SETTINGS.CELL_SIZE, GAME_SETTINGS.GRID_SIZE * GAME_SETTINGS.CELL_SIZE);

    // 绘制网格
    ctx.strokeStyle = '#2a2a2a';
    for (let i = 0; i < GAME_SETTINGS.GRID_SIZE; i++) {
      for (let j = 0; j < GAME_SETTINGS.GRID_SIZE; j++) {
        ctx.strokeRect(
          i * GAME_SETTINGS.CELL_SIZE,
          j * GAME_SETTINGS.CELL_SIZE,
          GAME_SETTINGS.CELL_SIZE,
          GAME_SETTINGS.CELL_SIZE
        );
      }
    }

    // 绘制蛇
    gameState.snake.forEach((segment, index) => {
      let color;
      if (gameState.isInvincible) {
        // 无敌状态下使用更明显的彩虹色
        const hue = (Date.now() / 50 + index * 10) % 360;
        const saturation = index === 0 ? '100%' : '90%';  // 更鲜艳的颜色
        const lightness = index === 0 ? '70%' : index === gameState.snake.length - 1 ? '40%' : '60%';  // 更亮的颜色
        color = `hsl(${hue}, ${saturation}, ${lightness})`;

        // 添加光晕效果
        ctx.shadowColor = `hsl(${hue}, 100%, 50%)`;
        ctx.shadowBlur = 10;
      } else {
        color = index === 0 ? '#22c55e' : '#4ade80';
        ctx.shadowColor = 'transparent';
        ctx.shadowBlur = 0;
      }
      
      // 绘制蛇身
      ctx.fillStyle = color;
      ctx.fillRect(
        segment.x * GAME_SETTINGS.CELL_SIZE,
        segment.y * GAME_SETTINGS.CELL_SIZE,
        GAME_SETTINGS.CELL_SIZE - 1,
        GAME_SETTINGS.CELL_SIZE - 1
      );

      // 在蛇头部添加眼睛
      if (index === 0) {
        ctx.shadowBlur = 0; // 关闭眼睛的光晕效果
        ctx.fillStyle = gameState.isInvincible ? '#ffffff' : '#ffffff';
        const eyeSize = GAME_SETTINGS.CELL_SIZE / 5;
        const eyeOffset = GAME_SETTINGS.CELL_SIZE / 4;
        
        // 左眼
        ctx.fillRect(
          segment.x * GAME_SETTINGS.CELL_SIZE + eyeOffset,
          segment.y * GAME_SETTINGS.CELL_SIZE + eyeOffset,
          eyeSize,
          eyeSize
        );
        
        // 右眼
        ctx.fillRect(
          segment.x * GAME_SETTINGS.CELL_SIZE + GAME_SETTINGS.CELL_SIZE - eyeOffset - eyeSize,
          segment.y * GAME_SETTINGS.CELL_SIZE + eyeOffset,
          eyeSize,
          eyeSize
        );

        if (gameState.isInvincible) {
          // 添加闪光的瞳孔
          ctx.fillStyle = '#ff0000';
          const pupilSize = eyeSize / 2;
          ctx.fillRect(
            segment.x * GAME_SETTINGS.CELL_SIZE + eyeOffset + pupilSize/2,
            segment.y * GAME_SETTINGS.CELL_SIZE + eyeOffset + pupilSize/2,
            pupilSize,
            pupilSize
          );
          ctx.fillRect(
            segment.x * GAME_SETTINGS.CELL_SIZE + GAME_SETTINGS.CELL_SIZE - eyeOffset - eyeSize + pupilSize/2,
            segment.y * GAME_SETTINGS.CELL_SIZE + eyeOffset + pupilSize/2,
            pupilSize,
            pupilSize
          );
        }
      }
    });

    // 绘制食物
    if (gameState.food) {
      let foodColor;
      switch (gameState.food.type) {
        case FoodType.GOLDEN:
          foodColor = '#ffd700';
          break;
        case FoodType.RAINBOW:
          const hue = (Date.now() / 50) % 360;
          foodColor = `hsl(${hue}, 100%, 50%)`;
          break;
        default:
          foodColor = '#ef4444';
      }
      ctx.fillStyle = foodColor;
      ctx.fillRect(
        gameState.food.x * GAME_SETTINGS.CELL_SIZE,
        gameState.food.y * GAME_SETTINGS.CELL_SIZE,
        GAME_SETTINGS.CELL_SIZE - 1,
        GAME_SETTINGS.CELL_SIZE - 1
      );
    }
  }, [gameState]);

  return (
    <div className={`relative ${shake ? 'animate-shake' : ''}`}>
      <canvas
        ref={canvasRef}
        width={GAME_SETTINGS.GRID_SIZE * GAME_SETTINGS.CELL_SIZE}
        height={GAME_SETTINGS.GRID_SIZE * GAME_SETTINGS.CELL_SIZE}
        className="border-2 border-gray-600 rounded-lg shadow-lg"
      />
      {gameState.gameOver && (
        <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
          <div className="text-white text-4xl font-bold">游戏结束</div>
        </div>
      )}
    </div>
  );
} 